<template>
  <div>
    <el-row>
      <el-col :span="8">
        <span class="fund-title">请输入编号:</span>
      </el-col>
      <el-col :span="10">
        <el-input
            placeholder="多位用“,”隔开"
            prefix-icon="el-icon-search"
            v-model="input">
        </el-input>
      </el-col>
      <el-col :span="3">
        <el-button icon="el-icon-search" @click="search" round>查询</el-button>
      </el-col>
    </el-row>
    <!--        这个要查询后出现-->
    <el-table :data="fundsData1" border stripe height="150" class="fund-table" v-if="show">
      <el-table-column prop="name" fixed label="基金名字" width="100"></el-table-column>
      <el-table-column prop="code" label="基金编号" width="100"></el-table-column>
      <el-table-column prop="day_growth" label="日增长" width="100"></el-table-column>
      <el-table-column prop="expect_worth" label="期待增长" width="100"></el-table-column>
      <el-table-column prop="expect_worth" label="期待值" width="100"></el-table-column>
      <el-table-column prop="expect_worth_date" label="日期待值" width="100"></el-table-column>
      <el-table-column prop="last_month_growth" label="上个月的增长" width="100"></el-table-column>
      <el-table-column prop="last_six_months_growth" label="最近六个月的增长" width="100"></el-table-column>
      <el-table-column prop="last_three_months_growth" label="最近三个月的增长" width="100"></el-table-column>
      <el-table-column prop="last_week_growth" label="上周增长" width="100"></el-table-column>
      <el-table-column prop="last_year_growth" label="去年增长" width="100"></el-table-column>
      <el-table-column prop="net_worth" label="净值" width="100"></el-table-column>
      <el-table-column prop="net_worth_date" label="日净值" width="100"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-circle-plus-outline" @click="submit(scope.$index)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="fund-favorites">收藏的基金</el-row>
    <!--        这个要查询后出现-->
    <el-table :data="fundsData2" border stripe height="150" class="fund-table">
      <el-table-column prop="name" fixed label="基金名字" width="100"></el-table-column>
      <el-table-column prop="code" label="基金编号" width="100"></el-table-column>
      <el-table-column prop="day_growth" label="日增长" width="100"></el-table-column>
      <el-table-column prop="expect_worth" label="期待增长" width="100"></el-table-column>
      <el-table-column prop="expect_worth" label="期待值" width="100"></el-table-column>
      <el-table-column prop="expect_worth_date" label="日期待值" width="100"></el-table-column>
      <el-table-column prop="last_month_growth" label="上个月的增长" width="100"></el-table-column>
      <el-table-column prop="last_six_months_growth" label="最近六个月的增长" width="100"></el-table-column>
      <el-table-column prop="last_three_months_growth" label="最近三个月的增长" width="100"></el-table-column>
      <el-table-column prop="last_week_growth" label="上周增长" width="100"></el-table-column>
      <el-table-column prop="last_year_growth" label="去年增长" width="100"></el-table-column>
      <el-table-column prop="net_worth" label="净值" width="100"></el-table-column>
      <el-table-column prop="net_worth_date" label="日净值" width="100"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-remove-outline" @click="del(scope.$index)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "finance-table-fund",
  data() {
    return {
      fundsData1: [{
        name: "",
        code: "",
        day_growth: "",
        expect_growth: "",
        expect_worth: "",
        expect_worth_date: "",
        last_month_growth: "",
        last_six_months_growth: "",
        last_three_months_growth: "",
        last_week_growth: "",
        last_year_growth: "",
        net_worth: "",
        net_worth_date: "",
      }],
      fundsData2: [{
        name: "",
        code: "",
        day_growth: "",
        expect_growth: "",
        expect_worth: "",
        expect_worth_date: "",
        last_month_growth: "",
        last_six_months_growth: "",
        last_three_months_growth: "",
        last_week_growth: "",
        last_year_growth: "",
        net_worth: "",
        net_worth_date: "",
      }],
      input: '',
      show: false,
    }
  },
  mounted() {
    this.load();
  },
  methods: {
    // 增加数据
    submit(i) {
      this.information = ""
      this.error = ""
      //向后端要数据
      this.$http.post("http://localhost:9000/finances/addFinances", {
        financesNumber: this.fundsData1[i].code,
        financesId: 1,
        userId: sessionStorage.getItem("token")
      }).then((res) => {
        if (res.data === "ok") {
          this.$notify({
            title: '成功',
            message: '添加成功',
            type: 'success'
          });
        } else {
          this.$notify({
            title: '警告',
            message: '已添加',
            type: 'warning'
          });
        }
      }).catch(() => {
        this.$notify({
          title: '警告',
          message: '已添加',
          type: 'warning'
        });
      })
      setTimeout(() => {
        this.load()
      }, 1000)
    },
    // 删除数据
    del(i) {
      //向后端要数据
      this.$http.post("http://localhost:9000/finances/deleteFinances", {
        financesNumber: this.fundsData2[i].code,
        financesId: 1,
        userId: sessionStorage.getItem("token")
      }).then((res) => {
        if (res.data === "ok") {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success'
          });
        } else {
          this.$notify.error({
            title: '错误',
            message: '删除失败'
          });
        }
      }).catch(() => {
        this.$notify.error({
          title: '错误',
          message: '删除失败'
        });
      })
      this.fundsData2.splice(i, 1)
    },
    //收藏表格的查询
    load() {
      this.fundsData2.length = 0
      //向后端要数据
      this.$http.post("http://localhost:9000/finances/selectFinances", {
        userId: sessionStorage.getItem("token"),
        financesId: 1
      }).then((res) => {
        if (res.data.length > 0) {
          this.$http
              .get('https://api.doctorxiong.club/v1/fund?code=' + res.data.join(","))
              .then(response => {
                    let data = response.data.data;
                    for (let datum of data) {
                      this.fundsData2.push({
                        name: datum.name,
                        code: datum.code,
                        day_growth: datum.dayGrowth,
                        expect_growth: datum.expectGrowth,
                        expect_worth: datum.expectWorth,
                        expect_worth_date: datum.expectWorthDate,
                        last_month_growth: datum.lastMonthGrowth,
                        last_six_months_growth: datum.lastSixMonthsGrowth,
                        last_three_months_growth: datum.lastThreeMonthsGrowth,
                        last_week_growth: datum.lastWeekGrowth,
                        last_year_growth: datum.lastYearGrowth,
                        net_worth: datum.netWorth,
                        net_worth_date: datum.netWorthDate
                      })
                    }
                  }
              )
        } else {
          console.log('查询为空')
        }
      }).catch(() => {
        console.log('查询失败')
      })
    },
    //查询表格的查询
    search() {
      this.show = false
      this.fundsData1.length = 0
      this.i = 0
      this.$http
          .get('https://api.doctorxiong.club/v1/fund?code=' + this.input)
          .then(response => {
                let data = response.data.data;
                for (let datum of data) {
                  this.fundsData1.push({
                    name: datum.name,
                    code: datum.code,
                    day_growth: datum.dayGrowth,
                    expect_growth: datum.expectGrowth,
                    expect_worth: datum.expectWorth,
                    expect_worth_date: datum.expectWorthDate,
                    last_month_growth: datum.lastMonthGrowth,
                    last_six_months_growth: datum.lastSixMonthsGrowth,
                    last_three_months_growth: datum.lastThreeMonthsGrowth,
                    last_week_growth: datum.lastWeekGrowth,
                    last_year_growth: datum.lastYearGrowth,
                    net_worth: datum.netWorth,
                    net_worth_date: datum.netWorthDate
                  })
                  this.show = true
                }
                if (this.show === false) {
                  this.$notify.error({
                    title: '错误',
                    message: '请输入正确编号'
                  });
                }
              }
          )
    }
  }
}
</script>

<style scoped>
.fund-title {
  float: right;
  font-size: x-large
}

.fund-table {
  width: 100%
}

.fund-favorites {
  height: 50px;
  font-size: 30px;
  text-align: center
}
</style>
